/*
 * @Author: 王俊杰 “251082517@qq.com”
 * @Date: 2023-07-05 14:34:05
 * @LastEditors: 王俊杰 “251082517@qq.com”
 * @LastEditTime: 2024-03-20 13:59:56
 * @FilePath: /vite-project/src/utils/flexible.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { computed } from 'vue'
import { PC_DEVICE_WIDTH } from '@/constants'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()

/**
 * 判断当前是否为移动设备，判断依据根据屏幕宽度是否小于一个指定的宽度(1280)
 */
export const isMobileTerminal = computed(() => {
  return width.value < PC_DEVICE_WIDTH
})

/**
 * 动态指定rem基准值，最大为40
 * 根据用户的屏幕宽度，进行一些计算，把计算出来的
 */
export const useREM = () => {
  // 定义最大的 fontSize
  const MAX_FONT_SIZE = 40
  // 监听 html 文档被解析完成的事件
  document.addEventListener('DOMContentLoaded', () => {
    // 获取 html 标签
    const html = document.querySelector('html')
    // 计算 fontSize,根据屏幕宽度 / 0
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize
    html.style.fontSize = fontSize + 'px'
  })
}
